<template>
  <span>
    <el-container>
      <my-component-header @setDialogFormVisible="setDialogFormVisible" />

      <el-main style="padding: 0px 100px">
        <div class="nav_menu">
          <my-component-navmenu :defaultActivate="defaultActivate" />

          <div class="content">
            <!-- 左方导航栏 -->
            <div class="left">
              <div>
                <el-menu
                  default-active="1-1"
                  :default-openeds="['1']"
                  class="el-menu-vertical-demo"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>我的订单</span>
                    </template>
                  </el-submenu>
                </el-menu>
              </div>
            </div>

            <div class="right">
              <el-card style="height: 570px" class="box-card">
                <div>
                  <el-divider content-position="left">我的订单</el-divider>
                </div>
                <div>
                  <el-table
                    style="width: 100%; height: 450px"
                    :data="orders"
                    stripe
                  >
                    <el-table-column prop="orderid" label="订单id">
                    </el-table-column>

                    <el-table-column
                      prop="productname"
                      label="产品名"
                      :width="tableColumnWidth"
                    >
                    </el-table-column>

                    <el-table-column prop="producttype" label="产品类型">
                    </el-table-column>

                    <el-table-column prop="productsize" label="产品大小">
                    </el-table-column>

                    <el-table-column prop="productcolor" label="产品颜色">
                    </el-table-column>

                    <el-table-column prop="receiver" label="收货人">
                    </el-table-column>

                    <el-table-column
                      prop="area"
                      label="收货地区"
                      :width="tableColumnWidth"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="addressdetail"
                      label="详细地址"
                      :width="tableColumnWidth"
                    >
                    </el-table-column>

                    <el-table-column prop="phonenumber" label="收货人电话">
                    </el-table-column>

                    <el-table-column label="操作" width="150">
                      <template slot-scope="scope">
                        <el-tag
                          v-if="scope.row.admincheck === null"
                          type="warning"
                          >待审核</el-tag
                        >

                        <el-tag v-if="scope.row.admincheck === 1" type="success"
                          >审核通过</el-tag
                        >
                        <el-tag v-if="scope.row.admincheck === 0" type="danger"
                          >审核失败</el-tag
                        >
                      </template>
                    </el-table-column>
                  </el-table>

                  <div class="page_info">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      @current-change="handleCurrentChange"
                      :current-page="currentPageNumber"
                      :page-size="currentPageSize"
                      :total="100"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <my-component-footer />
      </el-footer>
    </el-container>
  </span>
</template>

<script>
import Header from "../components/Header.vue";
import NavMenu from "../components/NavMenu.vue";
import Footer from "../components/Footer.vue";
import baseMixin from "../mixin/baseMixin";
import { selectMyOrders } from "../api/customer";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
  },
  data() {
    return {
      defaultActivate: "1",
      orders: [],
      tableColumnWidth: "100px",
      currentPageNumber: 1,
      currentPageSize: 5,
      user: {},
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPageNumber = val;
      this.selectMyOrders();
    },
    async selectMyOrders() {
      await selectMyOrders(
        this.user.username,
        this.currentPageNumber,
        this.currentPageSize
      )
        .then((res) => {
          console.log(res);
          let orders = res.data.list;
          for (let i = 0; i < orders.length; i++) {
            if (
              orders[i].productsize === null ||
              orders[i].productcolor === null
            )
              orders[i].productsize = orders[i].productcolor = "无";
          }
          this.orders = orders;
          // this.currentPageNumber = res.data.pageNum;
          // this.currentPageSize = res.data.pageSize;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
  created() {
    let user = this.getUserInfo();
    this.user = user;
    this.selectMyOrders();
  },
  mounted() {},
};
</script>

<style lang="scss">
@import "../assets/css/global.scss";

.page_info {
  padding: 0px;
  .el-pagination.is-background {
    margin-top: 10px;
    margin-right: 20px;
  }
}
</style>